<template>
  <!--主要是放html页面结构-->
  <section id="my-pages" v-bind:class="{joinButton: $.isAndroid}">
    <section class="my-pages-top" :style="'background-image:url('+ myPagesBg +')'">
      <!--头像-->
      <section class="portrait" @click="activeTo(myInfo)">
        <img :src="myInfo.headerUrl" alt="">
      </section>
      <section class="message">
        <h4>{{myInfo.userNickname}}</h4>
        <!--签到-->
        <section @click="myPagesSignInstate(myInfo.signInState)" class="sign-in">
          <div class="icon-sign-in" :style="'background-image:url('+iconSignIn+')'"></div>
          {{myInfo.signInState !== 1 ? "今日签到" : "已签到"}}
        </section>
        <span>已连续签到{{myInfo.shopContinueSignDays || 0}}天</span>

      </section>
      <!--会员等级-->
      <section @click="activeTo(myMember)" class="member">{{myInfo.rank}}会员</section>
      <!--二维码-->
      <section class="qrCode" :style="'background-image:url('+iconQrCode+')'">
        <mu-raised-button label="Alert Dialog" @click="open"/>
        <mu-dialog :open="dialog" title="二维码">
          <img id="my-pages-qe-code" :src="myInfo.qrCode" alt="">
          <mu-flat-button label="确定" slot="actions" primary @click="close"/>
        </mu-dialog>
      </section>
    </section>
    <!--提醒-->
    <section class="my-pages-remind">
      <span class="oneLine1"></span>
      <span class="oneLine2"></span>
      <ul>
        <li v-for="item in myRemind" @click="activeTo(item)" :key="item">
          <div v-show="item.remindNum ===null" class="remind-icon"
               :style="'background-image:url('+item.remindIcon+')'"></div>

          <div v-show="item.remindNum !==null" class="remind-num">
            <span>{{item.remindNum}}</span>
            天
          </div>
          <div class="remind-text">{{item.remindNum !== null ? item.remindText1 : item.remindText2}}</div>
        </li>
      </ul>

    </section>
    <!--我的订单    &   会员中心   & 车辆中心-->
    <section class="my-pages-indent" v-for="item in myIndentMember" :key="item">
      <section @click="activeTo(item.title)" class="indent-title">
        <div class="listActive" >
          <div>{{item.title.name}}</div>
          <p v-if="item.title.isShow">全部</p>
          <span v-if="item.title.isShow" :style="'background-image:url('+listIconRight+')'"></span>
        </div>
      </section>
      <ul class="indent-content">
        <li v-for="sub in item.content" @click="activeTo(sub)" :key="sub">
          <div :style="'background-image:url('+sub.indentIcon+')'"></div>
          <p>{{sub.indentText}}</p>
          <span v-show="sub.indentNum != 0">{{sub.indentNum > 99 ? "99+" : sub.indentNum}}</span>
        </li>
      </ul>
    </section>
    
    <!--跳转列表-->
    <ul class="my-pages-list">
      <li class="listActive" v-for="item in myList" @click="activeTo(item)" :key="item">
        <div>{{item.title}}</div>
        <span :style="'background-image:url('+listIconRight+')'"></span>
      </li>
    </ul>
  </section>
</template>

<script>
  import myPagesData from  'services/my-pages'

  //引入图标
  import defaultQrCodeIcon from 'assets/default_qrcode_icon.png'  //二维码缩略图
  import touchAppBlack from 'assets/touch_app_black.png'
  import headerFavicon from 'assets/favicon.png'
  import rightArrows from 'assets/right-arrows.png'
  import bgMyPage from 'assets/bg_mypage.png'
  export default{
    components: {
 
    },

    data(){
      return {
        myPagesBg: bgMyPage,
        myInfo: {
          userNickname: '未登录',
          qrCode: '',
          headerUrl: headerFavicon,
          signInState: 0,     //今日是否签到  0：未签到  1：签到
          shopContinueSignDays: '0',
          memberPosition: '',
          uri:'router_persionInfo',
          isVue:false,
          idWebvive:true
        },
        iconSignIn: touchAppBlack,
        iconQrCode: defaultQrCodeIcon,
        motCarId:'',
//        会员中心
        myMember: {
          title: '会员中心',
          uri: '#vb_vipRule',
          isVue: true,
          isPro: true
        },
//        提醒
        myRemind: myPagesData.myRemind,
        myIndent: [{
          indentText: '待付款',
          indentNum: '0',
          indentIcon: '',
          uri: ""
        }],
        myList: myPagesData.myList,
        listIconRight: rightArrows,
        //ui控制
        dialog: false,
        myIndentMember: myPagesData.myIndentMember,
//        判断是否回去订单数量
      }
    },
    created(){
      this.getMyPagesTopInfo()
    },
    beforeMount(){
      //        获取各种订单的数量
      this.getIndentNum();
    },
    
    watch: {
      '$route': function (to, from) {
        if (to.name === 'my-pages') {
          this.getIndentNum()
        }
      }
    },
    methods: {
      goToVue(item){
        let uri = item.uri
        if(!uri){
          return
        }
        console.log('uri: ' + uri)
        this.$.go({
          name: "router_crossWebView",
          query: {
            project: "ec",
            routeAndParams: uri
          }
        })
      },
      goToWebView(item){
        let uri = item.uri
        if(!uri){
          return
        }
        let carId = this.motCarId && this.motCarId.toString()
        if(this.motCarId){
          this.$.push(uri,{
            articleUrl: item.uri,
            carId:carId,
            from: 'my-pages'
          },(resp)=>{
          console.log('调用成功')
         })
        }else{
          this.$.push(uri,{
            articleUrl: item.uri,
            from: 'my-pages'
          },(resp)=>{
          console.log('调用成功')
         })
        }
        
      },
      // 页面跳转 统一使用 
      activeTo(data){
        if(!!data.isVue){
          console.log('111111111')
          this.goToVue(data)
        }else{
          console.log('222222222222')
          this.goToWebView(data)
        }
      },
//      获取订单的数量
      getIndentNum(){
        if(this.$.userId){
          myPagesData.getIndentNumber.bind(this)({}, (data) => {
            this.myIndentMember[0].content[0].indentNum = data.unPay
            this.myIndentMember[0].content[1].indentNum = data.unReceive
            this.myIndentMember[0].content[2].indentNum = data.unComment
            this.myIndentMember[0].content[3].indentNum = data.refund
          })
        }
      },
//      获取我的信息
      getMyPagesTopInfo(){
        console.log('request starting')
        myPagesData.getMyPagesTopInfo.bind(this)({}, (data) => {
          console.log(data)
//          this.myInfo.userNickname = '123'
          this.myRemind[0].remindNum = data.maintain
          this.myRemind[1].remindNum = data.insurance
          this.myRemind[2].remindNum = data.annualInspect
          this.motCarId  = data.motCarId 
          this.myInfo = data
          console.log(this.myInfo)
        }, (err) => {
//          alert(err)
        })
      },
//      签到
      myPagesSignInstate(data){
        if(this.$.userId){
          if (!data) {
            myPagesData.postMypagesSignInState.bind(this)({
              memberPosition: this.myInfo.memberPosition
            }, (data) => {
            });
            this.myInfo.signInState = 1;
            this.myInfo.shopContinueSignDays = parseInt(this.myInfo.shopContinueSignDays, 10) + 1
            console.log(this.myInfo.shopContinueSignDays);
          }
        }else{
          this.$.goLogin({
              shopId: this.shop.id
          })
        }
      },
      //UI控制器
      open () {
        this.dialog = true
      },
      close () {
        this.dialog = false
      }
    }
  }
</script>

<style lang="scss">

  #my-pages {
    background-color: rgb(239, 239, 244) !important;
    padding-bottom: 3.57rem;
    .my-pages-top {
      background-size: cover;
      height: 11.43rem;
      width: 100%;
      overflow: hidden;
      padding-bottom: 1.1rem;
      position: relative;
      .portrait {
        width: 4.64rem;
        height: 4.64rem;
        background-color: #fff;
        float: left;
        border-radius: 50%;
        margin: 4.28rem 0 0 1.43rem;
        overflow: hidden;
        border: 3px solid #fff;
        img {
          width: 102%;
          height: 102%;
          margin-left: -1%;
          margin-top: -1%;
        }
      }
      .message {
        width: 66%;
        float: left;
        padding: 0.85rem 0 0 0.71rem;
        h4 {
          color: rgba(255, 255, 255, 0.8);
          font-size: 1.28rem;
          margin: 3.93rem 0 0.36rem 0.72rem;
          font-weight: normal;
        }
        .sign-in {
          width: 6.43rem;
          height: 1.79rem;
          background-color: #fff;
          border-radius: 0.72rem;
          font-size: 1rem;
          line-height: 1.8rem;
          padding-left: 0.72rem;
          color: #764600;
          float: left;
          text-align: center;
          position: relative;
          margin-left: 0.36rem;
          .icon-sign-in {
            width: 1.08rem;
            height: 1.08rem;
            position: absolute;
            opacity: 0.7;
            background-position: center;
            background-size: cover;
            top: 0.29rem;
            left: 0.53rem;
            line-height: 1.29rem;
          }
        }
        span {
          color: #fff;
          float: left;
          display: block;
          width: 7.2rem;
          font-size: 1rem;
          margin-top: .57rem;
          transform: translate(.36rem, -.36rem);
        }
      }
      .member {
        position: absolute;
        top: 2.85rem;
        right: 0;
        background-color: rgba(0, 0, 0, .3);
        color: rgba(255, 255, 255, 0.8);
        height: 1.64rem;
        border-radius: 0.86rem 0 0 0.86rem;
        font-size: 1rem;
        line-height: 1.7rem;
        text-align: center;
        padding:0 1.1rem;
      }
      .qrCode {
        width: 1.44rem;
        height: 1.44rem;
        position: absolute;
        top: 6.07rem;
        right: 1.06rem;
        background-size: cover;
        background-position: center;
        opacity: 0.7;
        .mu-raised-button {
          width: 100%;
          height: 100%;
          min-width: 1.44rem;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }

      }

    }
    .my-pages-remind {
      position: relative;
      ul {
        background-color: #fff;
        height: 5.36rem;
        li {
          float: left;
          width: 33.33%;
          text-align: center;
          padding-top: 1.5rem;
          .remind-icon {
            width: 1.7rem;
            height: 1.7rem;
            display: inline-block;
            background-size: cover;
          }
          .remind-num {
            text-align: center;
            font-size: 0.9rem;
            span {
              font-size: 1.44rem;
              color: #F98700;
            }
          }
          .remind-text {
            padding-top: 0.36rem;
          }
        }
      }
      > span {
        position: absolute;
        height: 2.86rem;
        width: 0;
        border-right: 1px solid #ccc;
        top: 1.44rem;
      }
      span.oneLine1 {
        left: 33.33%;
      }
      span.oneLine2 {
        left: 66.66%;
      }
    }
    .my-pages-indent {
      margin-top: 0.72rem;
      background-color: #fff;
      height: 8.57rem;
      /*border-top: 1px solid #bcbcbc;*/
      /*border-bottom: 1px solid #bcbcbc;*/
      .indent-title {
        padding-left: 1.44rem;
        width: 100%;
        height: 3.6rem;
        border-bottom: 1px solid #c1c1c1;
        .listActive {
          div {
            line-height: 3.6rem;
            font-size: 1.1rem;
            color: #000;
            float: left;
          }
          p {
            color: #666666;
            float: right;
            padding: 1.3rem 2.86rem 0 0;
          }
        }
      }

      .indent-content {
        width: 100%;
        li {
          width: 25%;
          float: left;
          text-align: center;
          line-height: 4.29rem;
          position: relative;
          div {
            margin-top: 0.57rem;
            width: 2.14rem;
            height: 2.14rem;
            display: inline-block;
            background-position: center;
            background-size: cover;
          }
          p {
            font-size: 0.9rem;
            line-height: 1.44rem;
            margin-top: -1.44rem;
          }
          span {
            position: absolute;
            width: 1.44rem;
            height: 1.44rem;
            background-color: #f02b2b;
            color: #fff;
            font-size: 0.72rem;
            border-radius: 50%;
            top: 0.36rem;
            left: 50%;
            margin-left: .72rem;
            line-height: 1.44rem;
          }
        }
      }
    }
    .my-pages-list {
      background-color: #fff;
      border-bottom: 1px solid #c1c1c1;
      margin-top: .36rem;
      font-size: 1.08rem;
      color: #000;
      li {
        height: 3.6rem;
        padding-left: 1.44rem;
        border-bottom: 1px solid #c1c1c1;
        line-height: 3.6rem;
        overflow: hidden;
      }
      li:last-child {
        border-bottom: none;
      }
    }
    .mu-item-wrapper {
      padding: 0;
      .mu-ripple-wrapper {
        background-color: #fff;
        border-bottom: 2px solid #f4f4f4;
      }

    }
    .listActive {
      position: relative;
      span {
        position: absolute;
        top: 1.28rem;
        right: 1.44rem;
        width: 1rem;
        height: 1rem;
        background-size: cover;
      }
    }

    /*图标的修改*/
    /*列表三角形样式*/

  }

  #my-pages.joinButton {
    padding-bottom: 0;
  }

  /*弹出的二维码设置样式*/
  #my-pages-qe-code {
    width: 100%;
  }


</style>
